<template>
  <Header title="关联电表列表" />
  <div class="listBox">
    <List>
      <div class="listItem" v-for="item in electricityMeter" :key="item">
        <span>{{ item }}</span>
      </div>
    </List>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue"
import {
  Form,
  Field,
  CellGroup,
  Button,
  Dialog,
  List,
  showFailToast
} from "vant"
import { useCreateExperiment } from "@/hooks/useCreateExperiment"
import type { FormInstance } from "vant"
import Header from "@/components/Header.vue"

const formRef = ref<FormInstance>()

const emits = defineEmits(["nextStep"])

const { createExperimentDataFn, createExperimentData } = useCreateExperiment()

const show = ref(false)

const dialogInputValue = ref("")
const dialogTitle = ref("")
const serviceId = ref("")
const electricityMeter = ref([])

onMounted(() => {
  if (createExperimentData.value.serviceId) {
    serviceId.value = createExperimentData.value.serviceId
    electricityMeter.value = createExperimentData.value.electricityMeter
  }
})

// 添加设备ID
const openDialogFn = (type) => {
  if (type === "id") {
    dialogTitle.value = "添加设备ID"
    dialogInputValue.value = serviceId.value
  } else {
    dialogTitle.value = "添加电表号"
    dialogInputValue.value = ""
  }
  show.value = true
}

const confirmOk = () => {
  if (dialogTitle.value === "添加设备ID") {
    serviceId.value = dialogInputValue.value
  } else {
    electricityMeter.value.push(dialogInputValue.value)
  }
}

const onSubmit = (values) => {
  if (!values.serviceId) {
    return
  }
  if (!electricityMeter.value.length) {
    showFailToast("请添加电表号")
    return
  }
  console.log("createExperimentData.value", createExperimentData.value)
  const data = {
    ...createExperimentData.value,
    serviceId: values.serviceId,
    electricityMeter: electricityMeter.value
  }
  createExperimentDataFn(data)
  emits("nextStep", data)
}

const delElectricityMeterNumber = (value) => {
  electricityMeter.value = electricityMeter.value.filter((i) => i !== value)
}
</script>
<style scoped lang="less">
@import "./index.less";
</style>
